<template>
  <!-- 用户中心顶部导航栏 -->
  <div class="userCenterTop">
    <navigation>
      <router-link :to='this.$store.state.loginPath' slot="login" class="navbar-brand">{{this.$store.state.loginState}}</router-link>
      <router-link to='/home' slot="home" class="nav-link">首页</router-link>
      <router-link to='/userOnlineHistry' slot="history" class="nav-link">书库</router-link>
      <router-link to='/details' slot="details" class="nav-link">商城</router-link>

      <button type="button" slot="search" class="btn btn-sm text-white" data-toggle="modal" data-target="#modal">
        退出登录
      </button>

    </navigation>

    <!-- 退出登录模态框 -->
    <div class="modal fade" id="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">退出提示！</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p class="text-center">是否确认退出登录？</p>
          </div>
          <div class="modal-footer d-flex justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="leavePage">确认退出</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Navigation from 'components/Navigation/Navigation'

  export default {
    name: 'UserCenterTop',
    components: {
      Navigation
    },
    data () {
      return {

      }
    },
    methods: {
      leavePage() {
        // 成功退出后删除用户信息，书籍Id，返回首页并且刷新
        localStorage.removeItem('userInformation');
        localStorage.removeItem('booksId');
        window.location.hash = '/home';
        window.location.reload();
      }
    }
  }

</script>

<style scoped>

</style>